import { StyleSheet, TouchableWithoutFeedback } from 'react-native'
import React from 'react'
import { Text, View, Image } from 'native-base'
import { getDomain } from '../../utils/tools'
import { useNavigation } from '@react-navigation/native'

const GoodsItem = ({ data }) => {
  const navigation = useNavigation()
  return (
    <TouchableWithoutFeedback onPress={() => {
      navigation.push('GoodsDetail', {
        id: data._id
      })
    }}>
      <View style={styles.goodsItem}>
        <Image style={styles.picture} source={{ uri: getDomain(data?.pictures[0]?.url) }} alt='商品主图'></Image>
        <Text style={styles.title}>{data.title}</Text>
        <Text style={styles.price}>￥{data.price}</Text>
      </View>
    </TouchableWithoutFeedback>
  )
}

export default GoodsItem

const styles = StyleSheet.create({
  goodsItem: {
    width: '48%',
    marginVertical: 10,
    backgroundColor: '#fff',
    borderRadius: 10,
    // overflow: 'hidden'
  },
  picture: {
    width: '100%',
    height: 200
  },
  title: {
    marginTop: 10
  }
})